<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { ArrowDownOutlined, EyeOutlined } from '@ant-design/icons-vue';
import { downloadEngineeringFile } from '@/service/api/modules/engineering-manage/engineering-data-inquiry';

const isLocalHost = window.location.hostname === 'localhost';

const tableRef = ref(null);
const searchParams = ref({
  prodNo: null
});
const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'fileName',
    dataIndex: 'fileName',
    title: '图片路径',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <span class="cursor-pointer color-blue" onClick={() => handlePreview({ record })}>
          {record.fileName}
        </span>
      );
    }
  },

  {
    key: 'fileSizeKb',
    dataIndex: 'fileSizeKb',
    title: '图片大小',
    align: 'center',
    checked: true,
    ellipsis: true,

    customRender: ({ record }) => {
      return `${record.fileSizeKb}KB`;
    }
  },
  {
    key: 'fileSizeKb',
    dataIndex: 'fileSizeKb',
    title: '上传人',
    align: 'center',
    checked: true,
    ellipsis: true,

    customRender: ({ record }) => {
      return `${record.fileSizeKb}KB`;
    }
  },
  {
    key: 'fileSizeKb',
    dataIndex: 'fileSizeKb',
    title: '上传日期',
    align: 'center',
    checked: true,
    ellipsis: true,

    customRender: ({ record }) => {
      return `${record.fileSizeKb}KB`;
    }
  },
  {
    key: 'fileModifiedTime',
    dataIndex: 'fileModifiedTime',
    title: '更改时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];

function getData(params) {
  searchParams.value = params;
  nextTick(() => {
    tableRef.value.getData();
  });
}

function handleDownload(data) {
  downloadEngineeringFile({
    prodNo: data.record.prodNo,
    fileName: data.record.fileName
  });
  data.hidePopup();
}

const visible = ref(false);
const previewData = ref(null);
function handlePreview(data) {
  visible.value = true;
  previewData.value = `${isLocalHost ? 'http://192.168.166.169:9999/dev-api/' : '/dev-api/'}rcerp/erpMiFile/downMiFile?prodNo=${data.record.prodNo}&fileName=${data.record.fileName}`;
  data.hidePopup();
}

defineExpose({
  getData
});
</script>

<template>
  <Table
    ref="tableRef"
    v-model:searchParams="searchParams"
    class="h-full"
    :column="column"
    :show-row-selection="false"
    row-key="id"
    :scroll="{ y: 'auto' }"
    :is-init-get-data="false"
    url="/rcerp/erpMiFile/getMiFileList"
    :auto-generate-uuid="true"
    :is-pagination="false"
    @table-row-dblclick="data => handlePreview({ record: data })"
  >
    <template #title><span class="color-#646cff">客诉图片</span></template>
    <template #contextmenuPopup-orter="{ args }">
      <li class="popup-item" @click="handleDownload(args)">
        <SvgIcon local-icon="download" class="text-16px" />
        下载
      </li>
      <li class="popup-item" @click="handlePreview(args)">
        <SvgIcon local-icon="preview" class="text-16px" />
        预览
      </li>
    </template>
  </Table>
  <FileViwer v-model:visible="visible" :url="previewData" pdf-use-iframe />
  <!--
 <Modal v-model:visible="visible" title="预览" height="80vh" width="1200px">
    <PdfViewer :url="previewData" />
  </Modal>
--></template>

<style lang="scss" scoped></style>
